<template>
    <div>
        <div class="container">
            <Filter
                :list="filterList"
                v-model="query"
                :label-width="32"
                @search="handleSearch"
                @reset="handleReset"
            ></Filter>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column
                    prop="id"
                    fixed
                    label="ID"
                    width="100"
                    align="center"
                ></el-table-column>
                <el-table-column prop="title" label="标题" min-width="200"></el-table-column>
                <el-table-column label="图片链接" min-width="200" align="center">
                    <template v-slot="{ $index, row }">
                        <img
                            v-if="row.image_url"
                            class="image_url"
                            :src="row.image_url"
                            @click="handleChangeImg($index, row)"
                        />
                        <el-button type="primary" link v-else @click="handleChangeImg($index, row)">
                            添加图片链接
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="abstracts" label="摘要" min-width="280"></el-table-column>
                <!-- <el-table-column prop="views" label="浏览量" width="90"></el-table-column> -->
                <el-table-column label="是否置顶" width="120" align="center">
                    <template v-slot="{ row }">
                        <span>{{ row.stick ? "是" : "否" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                    <template v-slot="{ row }">
                        <el-tag v-if="row.status === 0">
                            {{ statusVal[row.status] }}
                        </el-tag>
                        <el-tag v-if="row.status === 1" type="success">
                            {{ statusVal[row.status] }}
                        </el-tag>
                        <el-tag v-if="row.status === 2" type="danger">
                            {{ statusVal[row.status] }}
                        </el-tag>
                        <el-tag v-if="row.status === 3" type="warning">
                            {{ statusVal[row.status] }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" width="160"></el-table-column>
                <el-table-column label="操作" fixed="right" width="240" align="center">
                    <template #default="scope">
                        <el-button
                            text
                            v-if="scope.row.status === 1"
                            :icon="Hide"
                            type="primary"
                            @click="handleForbid(scope.$index, scope.row)"
                        >
                            屏蔽
                        </el-button>
                        <el-button
                            text
                            v-if="scope.row.status === 3"
                            :icon="View"
                            type="primary"
                            @click="handleCancelForbid(scope.$index, scope.row)"
                        >
                            取消屏蔽
                        </el-button>
                        <el-button
                            text
                            :icon="Top"
                            type="primary"
                            @click="handleStick(scope.$index, scope.row)"
                        >
                            置顶
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 修改图片弹窗 -->
        <Dialog
            :list="DialogList"
            v-model="updateImgForm"
            :labelWidth="120"
            :visible="updateImgVisible"
            title="修改图片链接"
            @saveEdit="handleConfirmChangeImg"
            @cancel="() => (updateImgVisible = false)"
        ></Dialog>
    </div>
</template>

<script setup lang="ts" name="article">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// import {
//     getArticleList,
//     ArticleItem,
//     QueryParams,
//     articleForbid,
//     ArticleForbidParams,
//     articleStick,
//     UpdateImageItem,
//     articleImageUpdate,
// } from "@/api/articleApi";
import Filter, { FilterItem } from "@/components/Filter.vue";
import Dialog from "@/components/Dialog.vue";
import { queryImageSuggestions } from "@/utils/common";
const query = reactive({
    search: "",
    page: 1,
    pageSize: 10,
});

const form = reactive({
    id: 1,
    op_type: 1,
});

const updateImgForm = reactive({
    id: 0,
    image_url: "",
});
const filterList: FilterItem[] = [
    {
        label: "标题",
        key: "search",
        type: "input",
        enterTriiger: true,
    },
];

const statusVal: string[] = ["草稿", "已发布", "已删除", "被屏蔽"];
const tableData = ref([]);
const pageTotal = ref(0);
// 获取文章数据
const getData = async () => {
    try {
        // const res = await getArticleList(query);
        // tableData.value = res.items;
        // pageTotal.value = res.total;
        tableData.value = [
            {
                title: "CGTN两会特别节目：深圳市大数据研究院人工智能大模型研究中心丁添博士谈人工智能发展",
            },
        ];
    } catch (e) {
        console.log("获取数据失败", e);
    }
};
getData();
// 分页导航
const handlePageChange = (val: number) => {
    query.page = val;
    getData();
};

// 博客屏蔽
const handleForbid = async (index: number, row: any) => {
    // 二次确认
    ElMessageBox.confirm("确定要屏蔽该博客吗？", "提示", {
        type: "warning",
    })
        .then(async () => {
            // form.id = row.id;
            // form.op_type = 1;
            // const res = await articleForbid(form);
            // if (res) {
            //     ElMessage.success("屏蔽博客成功");
            //     getData();
            //     // tableData.value.splice(index, 1);
            // } else {
            //     ElMessage.error("屏蔽博客失败");
            // }
        })
        .catch((e) => {
            console.log(e);
        });
};

// 取消屏蔽博客
const handleCancelForbid = async (index: number, row: any) => {
    // 二次确认

    form.id = row.id;
    form.op_type = 0;
    // const res = await articleForbid(form);
    // if (res) {
    //     ElMessage.success("取消屏蔽博客成功");
    //     getData();
    //     // tableData.value.splice(index, 1);
    // } else {
    //     ElMessage.error("取消屏蔽博客失败");
    // }
};
// 置顶操作
const handleStick = async (idx: number, row: any) => {
    try {
        form.id = row.id;
        // const res = await articleStick(form);
        // if (res) {
        //     ElMessage.success(`置顶成功!`);
        //     getData();
        // }
    } catch (e) {
        ElMessage.error(`设置第 ${idx + 1} 行置顶失败`);
    }
};

// 查询操作
const handleSearch = () => {
    console.log(query);
    const curSearh: any = query.search?.trim() || "";
    query.search = curSearh;
    query.page = 1;
    getData();
};
// 重置
const handleReset = () => {
    query.search = "";
    getData();
};

// 修改图片
const updateImgVisible = ref(false);
let curIndex = 0;
const handleChangeImg = (index: number, row) => {
    curIndex = index;
    updateImgForm.id = row.id;
    // updateImgForm.image_url = row.image_url;
    updateImgVisible.value = true;
};

const handleConfirmChangeImg = async () => {
    try {
        // const res = await articleImageUpdate({
        //     id: updateImgForm!.id,
        //     image_url: updateImgForm.image_url,
        // });
        // if (+res.code === 0) {
        //     tableData.value[curIndex].image_url = updateImgForm.image_url;
        //     ElMessage.success(`更新成功`);
        //     updateImgVisible.value = false;
        // } else {
        //     ElMessage.success(`更新失败`);
        // }
    } catch (e) {
        console.log(e);
    }
};
const DialogList = [
    {
        label: "图片链接",
        key: "image_url",
        type: "autocomplete",
        rule: [{ required: true, message: "图片链接不能为空", trigger: "blur" }],
        style: "width: 100%",
        fetchSuggestions: queryImageSuggestions,
        props: {
            onChange: (item) => {
                console.log(item);
            },
            onSelect: (item) => {
                updateImgForm.image_url = item.url;
                console.log(item);
            },
        },
    },
];
</script>

<style lang="scss" scoped>
.container {
    .image_url {
        min-height: 100px;
        width: 100%;
    }
}
</style>
